<template>
  <view class="page">
    <u-navbar class="u-m-b-12" @leftClick="navLeftClick" :fixed="false" title="推广人列表" placeholder bgColor="#fff"></u-navbar>
    <view class="address">
      <view class="address-empty" >
        <view class="u-text-center u-font-28">我的团队</view>
        <view class="u-text-center" style="font-weight: 500;font-size: 64rpx;color: #E20300;">{{ total }}</view>
      </view>
    </view>
    <view class="type-list">
      <u-tabs
        :list="typeList"
        lineColor="#00C02F"
        lineWidth="64rpx"
        inactiveStyle="color: #313131;"
        activeStyle="color: #00C02F;"
        :current="tabsCurrent"
        @change="tabsChange"
        :scrollable="false"
      >
      </u-tabs>
    </view>
    <view class="list" v-if="list.length">
      <view class="item" v-for="item in list" :key="item.id">
        <view class="u-flex">
          <image style="width: 80rpx;height: 80rpx;margin-right: 26rpx;" :src="item.avatar" mode="aspectFill" />
          <text>{{ item.nickName }}</text>
        </view>
        <view>{{ item.createdTime }}</view>
      </view>
    </view>
    <a-empty v-else></a-empty>
  </view>
</template>

<script>
import { getTeamPartnerList } from '@/api/index'

export default {
  data() {
    return {
      typeList: [
        {
          name: '一级',
        },
        {
          name: '二级',
        },
      ],
      tabsCurrent: 0,
      pagesNum: 1,
      pages: 1,
      list: [],
      total: 0,
    };
  },
  onLoad() {
    this.getPage()
  },
  methods: {
    tabsChange(e) {
      this.tabsCurrent = e.index
      this.pagesNum = 1
      this.list = []
      this.getPage()
    },
    getPage() {
      uni.showLoading({ mask: true })
      getTeamPartnerList({ pageSize: 200, pageNum: this.pagesNum, userId: uni.getStorageSync('userInfo').userId, hierarchyLevel: this.tabsCurrent + 1 }).then(res => {
        uni.hideLoading()
        this.list = [...this.list, ...res.rows]
        this.pages = Math.ceil(res.total / 200)
        this.total = res.total
      })
    },
  },
  onReachBottom() {
    if(this.pagesNum < this.pages) {
      this.pagesNum++
      this.getPage()
    }
  }
};
</script>

<style lang="scss" scoped>
.page {
  width: 750rpx;
  min-height: 100vh;
  background-color: #F5F5F5;
  padding-bottom: 80rpx;
  position: relative;
  .address {
    width: 100%;
    height: 208rpx;
    background: #FFFFFF;
    border-radius: 12rpx;
    margin: 0 auto 18rpx;
    .address-empty {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 6rpx;
      font-size: 24rpx;
      color: #000000;
    }
  }
  .type-list {
    width: 100%;
    height: 90rpx;
    background: #FFFFFF;
    margin: 0 auto 20rpx;
  }
  .list {
    display: flex;
    flex-direction: column;
    gap: 12rpx;
    width: 702rpx;
    margin: 0 auto;
    margin-top: 12rpx;
    .item {
      width: 100%;
      background-color: #fff;
      border-radius: 12rpx;
      padding: 20rpx 24rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 28rpx;
      color: #000000;
    }
  }
}
</style>
